<template>
    <div class="login-container">
        <div class="login-card">
            <div class="logo-section">
                <img src="../../assets/logo.svg" alt="皮影快闪" class="logo">
                <h1 class="title">皮影快闪</h1>
            </div>

            <n-form ref="formRef" :model="formData" :rules="rules">
                <n-form-item path="username" label="用户名">
                    <n-input v-model:value="formData.username" placeholder="请输入用户名" />
                </n-form-item>

                <n-form-item path="password" label="密码">
                    <n-input v-model:value="formData.password" type="password" placeholder="请输入密码"
                        show-password-on="click" />
                </n-form-item>

                <div class="form-options">
                    <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
                    <n-button text size="small" @click="goToResetPassword">
                        忘记密码?
                    </n-button>
                </div>

                <n-button type="primary" block @click="handleLogin" :loading="isLoading">
                    登录
                </n-button>

                <div class="register-link">
                    还没有账号?
                    <n-button text @click="goToRegister">立即注册</n-button>
                </div>
            </n-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { NForm, NFormItem, NInput, NCheckbox, NButton } from 'naive-ui'
import { useUserStore } from '../../stores/userStore'
import type { FormInst } from 'naive-ui'

const router = useRouter()
const message = useMessage()
const userStore = useUserStore()

const formRef = ref<FormInst | null>(null)
const isLoading = ref(false)
const rememberMe = ref(false)

const formData = reactive({
    username: '',
    password: ''
})

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ]
}

const handleLogin = () => {
    formRef.value?.validate(async (errors: any) => {
        if (!errors) {
            try {
                isLoading.value = true
                // 模拟登录成功
                setTimeout(() => {
                    const user = {
                        id: '1',
                        username: formData.username,
                        email: `${formData.username}@example.com`,
                        nickname: formData.username,
                        avatar: '',
                        roles: ['user'],
                        status: 'active',
                        createdAt: new Date(),
                        updatedAt: new Date(),
                        verified: true
                    }
                    userStore.setUser(user)
                    userStore.setToken('demo-token')
                    message.success('登录成功')
                    router.push('/welcome')
                    isLoading.value = false
                }, 1000)
            } catch (error) {
                message.error('登录失败，请检查用户名和密码')
                isLoading.value = false
            }
        }
    })
}

const goToRegister = () => {
    router.push('/register')
}

const goToResetPassword = () => {
    message.info('重置密码功能暂未开放')
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);

    .login-card {
        width: 400px;
        padding: 40px;
        border-radius: 8px;
        background-color: var(--component-background);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

        .logo-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 32px;

            .logo {
                width: 64px;
                height: 64px;
                margin-bottom: 16px;
            }

            .title {
                font-size: 24px;
                font-weight: 600;
            }
        }

        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .register-link {
            margin-top: 24px;
            text-align: center;
        }
    }
}

@media (max-width: 480px) {
    .login-container {
        .login-card {
            width: 90%;
            padding: 24px;
        }
    }
}
</style>